<!--
 * @Author: zcc
 * @Date: 2021-08-31 15:29:13
 * @LastEditors: Please set LastEditors
 * @Description: computed属性
 * @FilePath: /vue3Learn/vue3-learn/src/views/CompositionsApi/computed.vue
-->
<template>
  <div class="contain">
    <p>
      <input type="text" v-model="age" />
    </p>
    <p>
      <input type="text" v-model="num">
    </p>
    <p>
      <input type="text" v-model="nextAge" />
    </p>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs, computed } from "vue";
export default {
  name: "computed",
  setup() {
    const age = ref(5);
    const num = computed(()=>{
      return '我' + age
    })
    const nextAge = computed({
      get() {
        console.log('get');
        return +age.value + 1;
      },
      set(value) {
        console.log(value,'set'); //  输出新修改的值
        return (age.value = value - 1);
      }
    });

    return {
      age,
      nextAge
    };
  }
};
</script>

<style lang="scss" scoped>
</style>

